<template>
	<view>
		<view class="timeline">
			<view class="" v-if="length == 0">
				<image src="../../../static/order2.png" mode="" style="width: 240upx;height: 240upx;display: block;margin: 200upx auto 20upx;"></image>
				<text style="display: block;text-align: center;color: #aaa;">暂时没有物流信息</text>
			</view>
			<view  v-else-if="length == 1" class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;margin: 20upx 0 0;">
				<view class="detail webkit">
					<view class="thumb">
						<image :src="res.goodspic" mode=""></image>
						<text v-cloak>{{res.goodsCount}}件商品</text>
					</view>
					<view class="flex">
						<view style="font-size: 28upx;color: #333;">物流状态 <text style="color: #04ab02;margin-left: 6upx;" v-cloak>{{res.expressStatus}}</text></view>
						<view v-cloak>快递公司 {{res.expresscom}}</view>
						<view v-cloak>快递单号 {{res.expresssn}}</view>
					</view>
				</view>
				<view v-for="(item,index) in res.addressList" :key="index" class="uni-timeline-item" :class="{'uni-timeline-first-item':index ==0}" style="padding: 0 20upx 30upx 10upx;">
					<view class="uni-timeline-item-divider"></view>
					<view class="uni-timeline-item-content" style="padding-top:4upx">
						<view style="font-size: 26upx;" class="step" v-cloak>{{item.step}}</view>
						<view class="datetime" style="font-size: 24upx;" v-cloak>{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				data:[],
				length: '',
				openid:''
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.express&app=1&orderid='+e.id,
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data
						if(res.data.addressList.length >0){
							this.length = 1
						}else if(res.data.addressList.length == 0){
							this.length = 0
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>.uni-timeline-first-item .uni-timeline-item-divider{background-color:#ef4f4f;}.uni-timeline-first-item .uni-timeline-item-content view{color:#ef4f4f;}.detail{padding:0 20upx;margin-bottom:20upx;padding-bottom:20upx;border-bottom:20upx solid #eaeaea;}.detail .flex{}.detail .flex view{font-size:24upx;color:#959595;}.detail .thumb{position:relative;margin-right:20upx;}.detail .thumb image{width:128upx;height:128upx;}.detail .thumb text{position:absolute;top:88upx;background:#000c;color:#fff;left:0;right:0;font-size:24upx;text-align:center;height:40upx;line-height:40upx;}</style>